<template>
  <div class="dataStatistics">
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="$route.meta.title"
    >
      <template v-if="$store.state.user.show">
        <svg-icon icon-class="change" class="add" @click.native="changeLocation" />
      </template>
    </header-bar> -->
    <div class="content">
      <div>
        <div class="title">
          <div>

            隔离总人数与新增统计
          </div>
        </div>
        <div
          ref="chartLine1"
          class="cardEcharts"
        />
      </div>

      <div>
        <div class="title">
          <div>解除隔离统计情况</div>
        </div>
        <div
          ref="chartLine2"
          class="cardEcharts"
        />
      </div>

      <div>
        <div class="title">

          <div>隔离类型</div>
        </div>
        <div
          ref="chartLine3"
          class="cardEcharts"
        />
      </div>

      <div>
        <div class="title">

          <div>隔离人员始发地</div>
        </div>
        <div
          ref="chartLine4"
          class="cardEcharts"
        />
      </div>

      <!-- <div ref="chart" style="width:500px;height:500px" /> -->
    </div>
  </div>

</template>

<script>
import Vue from 'vue'

import { Toast, Dialog, Icon, List } from 'vant'
Vue.use(Toast).use(Dialog).use(Icon).use(List)
import $api from '@/api/index'
import { mapGetters } from 'vuex'
export default {
  name: 'Source',
  data() {
    return {
      countData: '', // 隔离总人数
      NewAddData: '', // 新增统计情况
      FromAreaData: [], // 隔离人员始发地统计√
      ByTypeData: [], // 隔离类型统计√
      DetailData: '' // 解除隔离统计情况
    }
  },
  beforeCreate() {
    this.$dd.showTitleBar()
    this.$dd.setTitle({ title: '数据分析' })
  },
  mounted() {
    this.countIsolate()
    this.countSituationByFromArea()
    this.countSituationByType()
    this.queryQuarantineDetail()
    this.getEacharts()
    // this.getEachart4()

    // this.getEachart3()

    // // 新增统计情况
    // this.getEachart1()

    // // 隔离总人数

    // // 解除隔离统计情况
    // this.getEachart2()
    $api.user.queryQuarantineDetail({ reportIds: this.reportId }).then(res => {
      this.DetailData = res.data
    })
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  methods: {
    countIsolate() {
      $api.user.countIsolate({ reportIds: this.reportId }).then(res => {
        this.countData = res.data
        this.countSituationNewAdd()
      })
    },

    countSituationByFromArea() {
      $api.user.countSituationByFromArea({ reportIds: this.reportId }).then(res => {
        this.FromAreaData = res.data
        this.drawLine4(this.FromAreaData)
      })
    },
    countSituationByType() {
      $api.user.countSituationByType({ reportIds: this.reportId }).then(res => {
        this.ByTypeData = res.data
        this.drawLine3(this.ByTypeData)
      })
    },
    countSituationNewAdd() {
      $api.user.countSituationNewAdd({ reportIds: this.reportId }).then(res => {
        this.NewAddData = res.data
        this.drawLine1([this.NewAddData, this.countData])
      })
    },
    queryQuarantineDetail() {
      $api.user.queryQuarantineDetail({ reportIds: this.reportId }).then(res => {
        this.DetailData = res.data
        this.drawLine2(this.DetailData)
      })
    },

    getEacharts() {
      const myChart = this.$echarts.init(this.$refs.chart)
      var option = ''
      option = {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    drawLine1(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine1)

      var option = {
        xAxis: {
          type: 'category',
          data: ['"隔离总人数', '新增统计']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [10, 20],
          type: 'bar',
          barWidth: 30,
          barCategoryGap: '20%',
          itemStyle: { // 上方显示数值
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }]
      }
      myChart.setOption(option, true)
    },
    drawLine2(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine2)
      console.log(val)
      const arr = []
      arr.push(val.quarantineEnd, val.quarantineRuning)
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '解除隔离统计情况',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20px',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine3(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine3)
      const arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push({ name: val[i].quarantReason, value: val[i].count })
      }
      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine4(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine4)
      const arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push({ name: val[i].fromArea, value: val[i].count })
      }
      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          position: ['50%', '50%']
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.dataStatistics {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    margin-top: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    >div:nth-child(1){
      padding-top:40px;
    }
    .cardEcharts{
      width:calc(100% + 400px);
      height:500px;
      padding:20px 10px;
      box-sizing: border-box;
    }
    .title{
       width:calc(100% + 200px);
       text-align:center;
       display:flex;
       align-items:center;
       justify-content:center;
       >div{
         padding:10px 20px;
         border-radius:10px;
         color:#195CED;
         border:1px solid #195CED;
       }
    }
  }
}
</style>
